<template>
  <div>
    <div class="id">
      <header>
        <a href="javascript:;">ele.me</a>
        <a href="javascript:;">登录|注册</a>
      </header>
      <main>
        <nav>
          <div class="city_tip">
            <span>当前定位城市：</span>
            <span>定位不准时，请在城市列表中选择</span>
          </div>
        </nav>
        <a href="javascript:;" class="dqcs">
          <span>{{ guess.name }}</span>
          <img src="./箭头.png" alt="" @click="clk(guess.id)" />
        </a>
        <section>
          <h4>热门城市</h4>
          <ul>
            <li v-for="(i, index) in hot" :key="index" @click="clk(i.id)">
              {{ i.name }}
            </li>
          </ul>
        </section>
        <section v-for="(item, index) in group" :key="index">
          <h4>{{ index }}(按字母排序)</h4>
          <ul>
            <li v-for="(k, ind) in item" :key="ind"  @click="clk(k.id)">
              {{ k.name }}
            </li>
          </ul>
        </section>
      </main>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      hot: [],
      guess: [],
      group: {},
    };
  },
  mounted() {
    this.axios.get("http://elm.cangdu.org/v1/cities?type=hot").then((res) => {
      this.hot = res.data;
    });
    this.axios.get("http://elm.cangdu.org/v1/cities?type=guess").then((res) => {
      this.guess = res.data;
    });
    this.axios.get("http://elm.cangdu.org/v1/cities?type=group").then((res) => {
      var obj = res.data;
      var arr = Object.keys(obj).sort();
      arr.forEach((i) => {
        this.group[i] = obj[i];
      });
    });
  },
  methods: {
    clk(i) {
      this.$router.push({ path: "/city", query: { id: i } });
    },
  },
};
</script>
  
  <style  scoped>
.id {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 62rem;
  background: #3190e8;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  font-size: 20rem;
  /* padding: 0 16rem; */
  position: fixed;
  top: 0;
}
header a {
  color: #fff;
  line-height: 62rem;
}
nav {
  padding-top: 2.35rem;
  border-top: 1px solid #e4e4e4;
  background-color: #fff;
  margin-bottom: 0.4rem;
  padding-top: 62rem;
}
.city_tip {
  display: flex;
  justify-content: space-between;
  line-height: 48rem;
  padding: 0 16rem;
  height: 48rem;
}
main {
  flex: 1;
  background: #f5f5f5;
}
.city_tip span {
  font-size: 16rem;
  color: #666;
}
.dqcs {
  display: flex;
  height: 58rem;
  justify-content: space-between;
  align-items: center;
  padding: 0 15rem;
  border-top: 1px solid #e4e4e4;
  border-bottom: 2px solid #e4e4e4;
  font: 0.75rem/1.8rem Microsoft YaHei;
  background: #fff;
}
.dqcs span {
  font-size: 20rem;
}
.dqcs i {
  font-size: 20rem;
  font-weight: 100;
}
section {
  margin: 13rem 0;
  background: #fff;
}
section h4 {
  font-size: 14rem;
  padding: 0 14rem;
  height: 50rem;
  line-height: 50rem;
  border-top: 2px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
}
section ul {
  overflow: hidden;
}
section li {
  background: #fff;
  float: left;
  text-align: center;
  border-bottom: 0.025rem solid #e4e4e4;
  border-right: 0.025rem solid #e4e4e4;
  width: 24%;
  height: 56rem;
  line-height: 56rem;
  font-size: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
section:nth-of-type(1) li {
  color: #3190e8;
}
</style>